// For demo purposes only

body.page-ui-elements {

    .demo-headline {
        padding: 73px 0 110px;
        text-align: center;
    }
    .demo-logo {
        font: 900 90px/100px @font-family-demo;
        letter-spacing: -2px;
        margin: 10px 0;

        .logo {
            background: ~"url(../images/demo/logo-mask.png) center 0 no-repeat";
            background-size: 236px 181px;
            height: 181px;
            margin: 0 auto 26px;
            overflow: hidden;
            text-indent: -9999em;
            width: 236px;
        }
        small {
            color: fadeout(@brand-primary, 70%);
            display: block;
            font-size: 22px;
            font-weight: 700;
            letter-spacing: 0;
            padding-top: 5px;
        }
    }
    // Panels delimiter
    .demo-row {
        margin-bottom: 20px;

        .demo-heading-note,
        .demo-text-note {
            display: block;
            width: 260px;
            position: absolute;
            bottom: 10px;
            left: 0;
            font-size: 13px;
            line-height: 13px;
            color: mix(desaturate(@brand-primary, 25%), white, 34%);
            font-weight: 400;
        }
        .demo-text-note {
            bottom: auto;
            top: 10px;
        }

        &.typography-row {
            .demo-content {
                float: none;
                width: auto;
                clear: both;
            }
            .demo-type-example {
                padding-left: 25%;
                margin-bottom: 40px;
                position: relative;
            }
        }
    }
    .demo-section-title {
        font: 900 32px/40px @font-family-demo;
        margin: 10px 0;
    }
    .demo-panel-title {
        padding-top: 20px;
        margin: 2px 0 20px;
        font: bold 23px/40px @font-family-demo;

        small {
            color: mix(@brand-primary, @inverse, 66%);
            font-size: inherit;
            font-weight: 400;
        }
    }

    // Shift blocks to fit design
    .demo-navigation {
        margin-bottom: -4px;
        margin-top: -10px;
    }
    .demo-pager {
        margin-top: -20px;
    }

    .demo-headings {
        margin-bottom: 12px;
    }
    .demo-tiles {
        margin-bottom: 46px
    }

    .demo-icons {
        font-size: 32px;
        margin-left: -20px;
        padding-left: 20px;

        .demo-content {
            margin: 0 0 0 -35px;
            
            > span {
                display: inline-block;
                margin: 0 0 32px 35px;
                width: 24px;
                font-size: 24px;
            }  
        }
    }

    .demo-icons-tooltip {
        bottom: 0;
        color: mix(@brand-primary, @inverse, 30%);
        font-size: 12px;
        left: 100%;
        margin-left: 0 !important;
        position: absolute;
        width: 80px;
    }

    // Illustration Icons
    // --------------------------------------------------
    .demo-illustrations {

        .demo-content {
            margin: 0 0 0 -40px;
            padding-top: 20px;
            .clearfix();

            > div {
                float: left;
                width: 100px;
                height: 100px;
                line-height: 100px;
                margin: 0 0 40px 40px;
                text-align: center;
            }
        }
        img {
            display: inline-block;
            max-height: 100px;
            max-width: 100px;
            vertical-align: middle;
        }
    }

    .demo-samples {
        margin-bottom: 46px;
    }
    .demo-video {  
        padding-top: 95px;
        border-radius: @border-radius-large;
    }
    .demo-download-section {
        float: none;
        margin: 0 auto;
        padding: 60px 0 90px 20px;
        text-align: center;

        [class*='fui-'] {
            margin: 3px 0 -3px;
        }  
    }
    .demo-download {
        background-color: mix(@brand-primary, @inverse, 10%);  
        height: 190px;
        margin: 0 auto 32px;
        padding: 40px 28px 30px 32px;
        text-align: center;
        width: 190px;
        border-radius: 50%;

        img {
            height: 104px;
            width: 82px;
        }  
    }
    .demo-download-text {
        font-size: 15px;
        padding: 20px 0;
        text-align: center;
    }
    .demo-text-box {
        a:hover {
            color: @brand-secondary;
        }  
    }
    .demo-browser {
        background: mix(@brand-primary, black, 85%) url(../images/demo/browser.png) 0 0 no-repeat;
        background-size: 659px 42px;  
        color: @inverse;
        margin: 0 41px 140px 0;
        padding-top: 42px;
        border-radius: 0 0 @border-radius-large @border-radius-large;
    }
    .demo-browser-side {
        float: left;
        padding: 22px 20px;
        width: 151px;

        > h5 {
            font-size: 16px;
            margin-top: 4px;
            margin-bottom: 3px;
            text-transform: none;
            font-weight: 400;
        }
        > h6 {
            font-size: 11px;
            font-weight: 300;
            line-height: 18px;
            margin-top: 3px;
            text-transform: none;
            -webkit-font-smoothing: subpixel-antialiased;
        }  
    }
    .demo-browser-author {
        background: ~"url(../images/demo/browser-author.jpg) center center no-repeat";
        border: 3px solid @inverse;
        display: block;
        height: 84px;
        margin: 0 auto;
        width: 84px;
        border-radius: 50%;
    }
    .demo-browser-action {
        padding: 30px 0 12px;

        > .btn {
            padding: 7px 0 8px 11px !important;
            text-align: left;
            border-radius: @border-radius-small;

            &:before {
                color: @inverse;
                content: '\e009';
                font-size: 16px;
                font-family: 'Flat-UI-Icons';
                font-weight: 300;
                margin-right: 12px;
                position: relative;
                top: 1px;
                -webkit-font-smoothing: antialiased;
            }  
        }    
    }
    .demo-browser-content {
        background-color: @brand-primary;  
        overflow: hidden;
        padding: 21px 0 0 20px;
        border-radius: 0 0 @border-radius-large;

        > img {
            border: 6px solid @inverse;
            float: left;
            margin: 0 15px 20px 0;
            width: 146px;
        }  
    }
    // Serving 2x images
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {
        .logo {
            background-image: url(../images/demo/logo-mask-2x.png)
        }
        .demo-browser {
            background-image: url(../images/demo/browser-2x.png)
        }  
    }

    // Shatches
    .demo-swatches-row {
        [class*="col"] {
            float: left;
            min-height: 1px;
        }
        .swatches-col {
            width: 800px;
            margin-left: -5px;
        }
        .swatches-desc-col {
            width: 140px;
            margin-left: 20px;
        }
    }

	.demo-font-awesome {
		.fa {
			font-size: 1.5em;
			padding: 0.5em 0;
		}
		
		.text-muted {
			display: none;
		}
	}
}